Edytor zadań - arcanoid cz. 8

Opis

Arcanoid w `canvas cz.8` - wyniki

Kliknij na przycisk "Pokaż".

Stworzymy cykliczne rysowanie kulki, paletki oraz murku z cegiełek. Połączymy w jednej funkcji rysowanie płótna, kulki, paletki i murku oraz zmienimy ich położenie: paletki (jeśli będzie ruch myszką) i kulki (z każdym odświeżeniem lub po kolizji z cegłą, krawędzią, paletką). Cegła będzie rysowana jeśli nie wykryjemy jej kolizji z piłką. Piłka na dolnej krawędzi gdzie nie ma paletki oznacza KONIEC GRY. Dodamy wyniki i gratulacje.

Ustawienie płótna do rysowania canvas na pełnym oknie, zmienne
+dokładamy wyniki
Funkcje rysowania koła, paletki, cegieł
+ rysujemy wyniki
Funkcja rysowania całości - połączenie czynności: czyszczenie, rysowanie, zmiany.
+ dokładamy rysowanie wyniku
Detektor zdarzeń i funkcja obsługi ruchów myszy/paletki
+ w obsłudze kolizji piłka/murek, przy 'zderzeniu' wynik się powiększa o 1, jeśli będzie równy ilości cegieł wyświetlą się gratulacje
Zamieniliśmy setInterval() na requestAnimationFrame() wywoływaną z wnętrza funkcji draw(). Zsynchronizuje odpowiednio szybkość klatek i renderuje kształty tylko w razie potrzeby. Zapewnia to bardziej wydajną, płynniejszą pętlę animacji niż starsza setInterval().

Kod

👀

//--------------- zmienne ---------------
ballRadius = 10;
var x = ballRadius;
var y = canvas.height-ballRadius;
var dx = 3;
var dy = -3;
var score = 0; //dołożyliśmy wynik

var paletkaH = 10; //wysokość paletki
var paletkaW = canvas.width/8; //szerokość paletki
var paletkaX = (canvas.width-paletkaW) / 2;

//------zmienne cegiełek -------
var brickRowCount = 3; //rzędy
var brickColumnCount = 8; //kolumny
var brickHeight = 20;  //wysokość
var brickPadding = 5;  //odstępy między
var brickOffsetTop = 30; //odstęp od góry
var brickWidth = Math.round((canvas.width-brickColumnCount*brickPadding)/9);
var brickOffsetLeft = Math.round((canvas.width - (brickWidth+brickPadding)*brickColumnCount+brickPadding)/2);

//---2---- RYSOWANIE KOŁA -------
function drawBall() {
   ctx.beginPath();
   ctx.arc(x, y, ballRadius, 0, Math.PI*2);
   ctx.fillStyle = "#0095DD";
   ctx.fill();
   ctx.closePath();
}
//---2.1---- RYSOWANIE PALETKI -------
function drawPaletka() {
    ctx.beginPath();
    ctx.rect(paletkaX, canvas.height-paletkaH-2, paletkaW, paletkaH);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.closePath();
}
//---2.2---- RYSOWANIE MURKU -------
function drawBricks() {
  for(var c=0; c<brickColumnCount; c++) {
   for(var r=0; r<brickRowCount; r++) {
    // rysujemy tylko istniejące cegły
    if (bricks[c][r].status == 1) {
     var brickX = (c*(brickWidth+brickPadding)) +brickOffsetLeft;
     var brickY = (r*(brickHeight+brickPadding)) +brickOffsetTop;
     bricks[c][r].x = brickX;
     bricks[c][r].y = brickY;
     ctx.beginPath();
     ctx.rect(brickX, brickY, brickWidth, brickHeight);
     ctx.fillStyle = "lightgreen";
     ctx.fill();
     ctx.closePath();
	}
  }
 }
}
//---2.3--- RYSOWANIE WYNIKU ------
function drawScore() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "white";
    ctx.fillText("Score: "+score, 10, 20);
}

//--3-- CZYSZCZENIE, RYSOWANIE, ZMIANY----
function draw() {
 ctx.fillStyle = "hsl(0, 0%, 0%, 1)";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 drawBall();
 drawPaletka(); 
 drawBricks();      // rysujemy murek
 collisionDetection(); // piłka <---> murek
 drawScore();  // + rysujemy wynik
 if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
 }
 //sprawdzamy na dolnej krawędzi:
 if (y + dy < ballRadius) {
 dy = -dy;
 } else if (y + dy > canvas.height-ballRadius) {
  if(x > paletkaX && x < paletkaX + paletkaW) {
        dy = -dy;
  }
  else {
        alert("GAME OVER");
        document.location.reload();
  }
 }
  x += dx;
  y += dy;
  //funkcja przerysowania:
  requestAnimationFrame(draw); 
}

//--4-- DETEKTOR + funkcja zdarzeń
document.addEventListener("mousemove", mysz, false);

Podgląd:

📂

Arcanoid w canvas cz.8 - wyniki

Arcanoid w `canvas cz.8` - wyniki